//（首页 1）  获取12个首页标签
function index() {
    (function () {
        $.get("http://chst.vip:1234/api/getindexmenu")
            .then(res => {
                let {
                    result: data
                } = res
                console.log(data);
                let html = ""
                data.forEach(item => {
                    let str = item.img
                    let str1 = str.slice(10, str.length - 1)
                    let str2 = '<img src="./assets/' + str1
                    html += `
                <div>
                    <a href='pages/${item.titlehref}'>${str2}</a>
                    <span>${item.name}</span>
                </div>
                    `
                })
                $('#nav').append(html)
                
                $('#nav div:eq(7) a').attr('href','#')
                
                // 点击更多
                let flage = false;
                $('#nav div').eq(7).click(function () {
                    if (!flage) {
                        $('#nav').animate({
                            height: "8.24rem"
                        }, 500)
                        flage = true;
                    } else {
                        $('#nav').animate({
                            height: "5.49rem"
                        }, 500)
                        flage = false
                    }
                })
                
                
            })
            
            
        //（首页1）返回顶部
        $(".gotop").click(function () {
            $("html,body").animate({
                scrollTop: 0
            }, 500)
        })


        //（首页1）获取首页商品长列表
        let box = document.querySelector("#box")
        // console.log(dv);

        fetch("http://chst.vip:1234/api/getmoneyctrl")
            .then(body => body.json())
            .then(res => {
                let html1 = ""
                res.result.forEach(item => {
                    html1 += `
                    <div productid=${item.productId}>
                    <a>${item.productImg2} </a>
                    <a><h3>${item.productName}</h3>
                        <p>${item.productFrom}|${item.productTime}</p>
                        <span>${item.productComCount}</span></a>
                    </div>
                    `
                })
                // console.log(html1);
                box.innerHTML = html1

                //获取div元素，注册点击事件
                let divs = [...box.children];

                divs.forEach(div => {
                    div.onclick = function () {
                        let productid = this.getAttribute("productid")
                        // console.log(productid);

                        //跳转当前详情页面
                        location.href = `../pages/index2.html?productid=${productid}`
                    }
                })

            })
    })()
}


//（ 2 ）比价搜索
function chouti() {
    (function () {
        //外层请求
        $.get("http://chst.vip:1234/api/getcategorytitle")
            .then(res => {
                let {
                    result: price
                } = res
                console.log(price);
                let price1 = ""
                price.forEach((item, index) => {
                    smallTab(item.titleId, index) //调用smallTab
                    price1 += `
                    <p>${item.title}
                        <span>▼</span>  
                    </p>
                    <div class="option"></div>  
                `
                })
                $(".arrows").html(price1)


                //点击扩大缩小
                $('.option').hide()
                $('.arrows p').click(function () {
                    $(this).next().slideToggle(500)
                })
            })

            

        //封装内层请求函数
        function smallTab(titleId, index) {
            $.get('http://chst.vip:1234/api/getcategory?titleid=' + titleId)
                .then(res => {
                    // console.log(res);
                    let {
                        result: data
                    } = res
                    let html = ''
                    data.forEach(item => {
                        // console.log(item);
                        html += `
                        <a href="../pages/shangpinliebiao.html?title=${item.category}&categoryid=${item.categoryId}">${item.category}</a>
                        `
                    })
                    $('.option').eq(index).html(html)
                })
        }

        //点击回到顶部
        $(".gotop").click(function () {
            $("html,body").animate({
                scrollTop: 0
            }, 500)
        })


    })()
}

//( 3 )首页、分类、电视 标题
function dianshi() {
        let arr=document.querySelector(".daohang")

        // 解码地址
        let url =location.href
        // console.log(url);

        // 获取元素的个数
        let {categoryid} =getUrlParams(url);

        // 获取对应位置的名称
        let {title} = getUrlParams(url);
        // console.log(categoryid);

        fetch(`http://chst.vip:1234/api/getcategorybyid?categoryid=${categoryid}`)
        .then(body=>body.json())
        .then(res=>{
            console.log(res);
            let result=res.result[0]
            let html =`
                    <a href="../index.html">首页</a>&gt;
                    <a href="../pages/category.html">全部分类</a>&gt;
                    <a href="">${result.category}</a>&gt;
            `
            arr.innerHTML=html
        })

        fetch(`http://chst.vip:1234/api/getproductlist?categoryid=${categoryid}&pageid=1`)
        .then(body=>body.json())
        .then(res=>{
            let result= res.result
            // let{result:thing}=res
            let productId = res.productId
           //  console.log(productId);
           // 页面元素个数
           let totalCount = res.totalCount;
           // console.log(totalCount);
           // 获得的页面总数
           console.log(totalCount/10);
           let math =Math.ceil(totalCount/10);
        //    console.log(math);
   
   
           // 动态获取的页面数
           body=""
           for (var i=1;i<=math;i++){
               console.log(i);
               body +=
               `<option value="${i}">${i}/${math}</option>
               `
           }
         $('#select').append(body)
           let html2 = ""
            result.forEach(item=>{
                html2 +=`
                <li categoryid=${item.categoryId} productid=${item.productId}>
                    <a href="#"></a>
                    ${item.productImg}
                    <div>
                        <h3>${item.productName}</h3>
                        <p>${item.productPrice}</p>
                        <span>${item.productQuote}  ${item.productCom}</span>
                    </div>
                </li>
                `
            })
            arr1.innerHTML=html2

        })

        let a =1
        //封装获取a  
        function fn(a){
            fetch(`http://chst.vip:1234/api/getproductlist?categoryid=${categoryid}&pageid=${a}`)
            .then(body=>body.json())
            .then(res=>{
                    $('#select').val(a)
                    let result= res.result;
                    let{result:thing}=res
                    let productId = thing.productId
                    // 页面元素个数
                    let totalCount = res.totalCount;
                    // let totalCount = res.totalCount;
                    console.log(totalCount);


                    // 获得的页面总数
                    console.log(totalCount/10);
                    let math =Math.ceil(totalCount/10);

                    let html1 = ""
                    result.forEach(item=>{
                        html1 +=`
                        <li categoryid=${item.categoryId} productid=${item.productId}>
                        <a href="#"></a>
                        ${item.productImg}
                            <div>
                                <h3>${item.productName}</h3>
                                <p>${item.productPrice}</p>
                                <span>${item.productQuote}  ${item.productCom}</span>
                            </div>
                        </li>
                        `
                    })
                    arr1.innerHTML=html1

                    if(a==1){
        
                        $('.btn1').prop('disabled',true).css({background:'#f5d9b6'})
                    }else if(a>1){
                    
                      $('.btn1').prop('disabled',false).css({background:'orange'})
                    }
            
            
                    if(a==math){
                     
                        $('.btn2').prop('disabled',true).css({background:'#f5d9b6'})
                    }else if(a<math){
                    
                      $('.btn2').prop('disabled',false).css({background:'orange'})
                    }
            })
        }
        //下一页
        $('.btn2').click(function(){
            a++
            //下一页
           fn(a)
        })

        $('.btn1').click(function(){
            a--
            //上一页

           fn(a)
        })
        
        //监听下拉框变化
        $('#select').change(function(){
            a = $('#select').val()
            fn(a)
       
       })
        //商品长列表详情获取渲染

        let arr1=document.querySelector('#search ul')
        fetch(`http://chst.vip:1234/api/getproductlist?categoryid=${categoryid}`)
        .then(body=>body.json())
        .then(res=>{
            console.log(res);
            let result1=res.result
            // console.log(result1);
            let html1=''
            result1.forEach(item=>{
                html1 +=`
                <li categoryid=${item.categoryId} productid=${item.productId}>
                    <a href="#"></a>
                    ${item.productImg}
                    <div>
                        <h3>${item.productName}</h3>
                        <p>${item.productPrice}</p>
                        <span>${item.productQuote}  ${item.productCom}</span>
                    </div>
                </li>
                `
            })
            arr1.innerHTML=html1

           
            //获取li 注册点击事件
            let lis =[...arr1.children];

            lis.forEach(li=>{
                li.onclick=function(){
                    let categoryid=this.getAttribute("categoryid")
                    let productid=this.getAttribute('productid')
                    console.log(this);

                    location.href=`../pages/shangpin.html?categoryid=${categoryid}&productid=${productid}&title=${title}`
                }
            })
        })
        
}


//shangpin( 5 商品详情 页面)

function shangpin(){
        let arr=document.querySelector(".daohang")
        
        //console.log(categoryid);

        fetch(`http://chst.vip:1234/api/getproduct?productid=${productid}`)
        .then(body=>body.json())
        .then(res=>{
            console.log(res);
            let result=res.result[0]
            let html =`
                    <a href="../index.html">首页</a>&gt;
                    <a href="shangpinliebiao.html?title=${title}&categoryid=${categoryid}">${title}</a>&gt;
                    <a href="">${result.productName.split(' ')[0]}</a>&gt; 
            
                `
            arr.innerHTML=html
        })
        let arr1=document.querySelector(".content-1")

        fetch(`http://chst.vip:1234/api/getproduct?productid=${productid}`)
        .then(body=>body.json())
        .then(res=>{
            let result=res.result[0]
            let html =`
                    <li class="li1">${result.productImg}</li>
                    <li class="li2">${result.productName}</li>
                    <li class="li3">${result.bjShop}</li>
                `
            arr1.innerHTML=html
        })

        let arr2=document.querySelector(".comment")

        fetch(`http://chst.vip:1234/api/getproductcom?productid=${productid}`)
        .then(body=>body.json())
        .then(res=>{
            console.log(res);
            let result=res.result
            let html=""
            result.forEach(item=>{
                html +=`
                    <li class="li_1">${item.comName}</li>
                    <li class="li_2">${item.comTime}</li>
                    <li class="li_3">${item.comFrom}</li>
                    <li class="li_4">${item.comContent}</li>
                `
            })
            arr2.innerHTML=html
        })
        

}
